import React, { Component } from "react";
import Nav from "../Components/Nav";
// import DeskTop from "../Components/DeskTop";
import CarouselProduct from "../Components/CarouselProduct";
import Products from "../Components/Products";
import Footer from "../Components/Footer";

import "./index.less";

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    if (this.desktop && this.topContainer) {
      document.addEventListener("scroll", () => {
        if (
          document.documentElement.scrollTop >= this.topContainer.clientHeight
        ) {
          this.desktop.classList.add(["activeDeskTop"]);
        } else {
          this.desktop.classList.remove("activeDeskTop");
        }
      });
    }
  }

  render() {
    return (
      <div className="home">
        <div ref={(ele) => (this.topContainer = ele)}>
          <Nav />
        </div>
        <CarouselProduct />
        {/*<DeskTop ref={(ele) => (this.desktop = ele)} />*/}
        <div className="component">
          <div className="container">
            <div className="left">Machinery and equipment factory</div>
            <div className="right">
              <p>
                China Henan Yunchi Machinery Equipment Co., Ltd. was established on May 3, 2016.
              </p>
              <p>
                Mainly engaged in the research and development, production and sales of machinery and
                equipment.
              </p>
              <p>
                Including partition board installation series, construction industry mixing series, etc.
              </p>
              <p>
                Integrating production, sales and after-sales service, it is well-known among similar
                products in China and is exported to Southeast Asia, West Asia, the Middle East, Africa,
                Europe and the United States.
              </p>
            </div>
          </div>
        </div>
        <Products />
        <Footer />
      </div>
    );
  }
}
